<template>
	<view class="infolist">
		<view class="page" v-if='list.length'>
      <view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
        <view class="item-left">
          <view class="title">{{ item.title }}</view>
          <rich-text class="text" :nodes="item.content"></rich-text>
        </view>
        <view class="item-right" v-if="item.imgPath">
          <image :src="imgBasePath + item.imgPath"></image>
        </view>
      </view>
		</view>
		<view class="noData" v-else>
			<image :src="`${imgBasePath}/statics/std/static/noData.png`"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		requestGet
	} from '@/utils/request.js'
	let img_api = process.env.VUE_APP_BASEURL_IMG_API;
	export default {
		data() {
			return {
				imgBasePath: img_api,
        list: [],
				pages: {
					pageNum: 1,
					pageSize: 10,
				},
				texts: [],
				loadMore: true,
			}
		},
		onShow() {
      this.pages = {
					pageNum: 1,
					pageSize: 10,
				}
      this.list = [];
			this.getTexts()
		},
		methods: {
			onReachBottom() {
				if(this.loadMore) this.getTexts()
			},
			goDetail(item) {
				if (item.viewPath && item.viewPath != '') {
					uni.navigateTo({
						url: item.viewPath + '?id=' + item.bizId
					})
				}
			},
			getTexts() {
        requestGet(`/content/collect/list`, {
        	...this.pages
        }, '/baseplatform').then(res => {
        	if (res.code === 200) {
        		this.list.push(...res.rows);
        		if (this.list.length < res.total) {
        			this.loadMore = true;
        			this.pages.pageNum = this.pages.pageNum + 1;
        		} else {
        			this.loadMore = false;
        		}
        		console.log('更新后的texts', this.list)
        	}
        }).catch((err) => console.log('错误了', err))
			}
		},
	}
</script>

<style lang="scss" scoped>
	.infolist {
		height: 100vh;
		position: relative;
    background: #F5F7F6;
    overflow: hidden;
		&::-webkit-scrollbar {
			display: none !important;
		}
	}
	.page {
		overflow-y: scroll;
		display: flex;
    flex-direction: column;
		align-items: flex-start;
		padding: 0 32rpx;
		box-sizing: border-box;

		&::-webkit-scrollbar {
			display: none !important;
		}
    .item{
      margin-top: 16rpx;
      width: calc(100% - 48rpx);
      padding: 24rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background-color: #FFFFFF;
      border-radius: 24rpx;
      .item-left{
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        .title{
          font-size: 32rpx;
          font-weight: 600;
          color: rgba(0,0,0,0.9);
          line-height: 44rpx;
        }
        .text{
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.7);
          line-height: 40rpx;
          margin-top: 20rpx;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 控制最多显示两行 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .item-right{
        flex: 0 0 auto;
        width: 144rpx;
        height: 144rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-left: 32rpx;
        image{
          height: 100%;
          width: 100%;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
        }
      }
    }
	}
</style>